<template>
    <div id="streetView">
        <div id="smallMap"></div>
    </div>
</template>

<script>
    export default {
        name: 'streetView',
        data () {
            return {
                // 浏览器标题
                title: '查看街景',
                // 查看点坐标
                coordinate: {},
            }
        },
        mounted(){
            // 设置浏览器标题
            document.title = this.title;
            // 获取查看点坐标
            if (this.$route.query.x && this.$route.query.y) {
                this.coordinate = {
                    x: this.$route.query.x,
                    y: this.$route.query.y,
                };
            } else {
                this.$router.push({ path: '*', redirect: '/404', hidden: true });
                return
            }
            // 初始化地图——街景图
            this.initMap();
            // 初始化左下角鹰眼小地图
            this.initSmallMap();
        },
        methods: {
            /**
             * Description:初始化街景图（全景图）
             * Author:ybt
             * Date:2020/10/29
             */
            initMap(){
                console.log(this.coordinate, "查看点坐标")
                // 默认为显示导航控件
                let panorama = new BMap.Panorama('streetView', {
                    albumsControl: true    //默认为不显示相册控件，默认值为false
                });
                panorama.setPosition(new BMap.Point(Number(this.coordinate.x), Number(this.coordinate.y)));

            },
            /**
             * Description:初始化左下角鹰眼小地图
             * Author:ybt
             * Date:2020/10/29
             */
            initSmallMap(){
                var map = new BMap.Map('smallMap');
                map.centerAndZoom(new BMap.Point(Number(this.coordinate.x), Number(this.coordinate.y)), 17);
                map.enableScrollWheelZoom(true);
                // 创建点标记
                var marker1 = new BMap.Marker(new BMap.Point(Number(this.coordinate.x), Number(this.coordinate.y)));
                // 在地图上添加点标记
                map.addOverlay(marker1);
            }
        }
    }
</script>

<style lang="scss">
    #streetView{
        position: relative;
        width: 100%;
        height: 100%;
        background-color: #fff;
        #smallMap{
            position: absolute;
            left: 0.125rem;
            bottom: 0.125rem;
            width: 3.75rem;
            height: 3.75rem;
            z-index: 9999;
        }
        & > div:last-of-type{
            width: calc(100% - 3.875rem) !important;
            height: 1.25rem !important;
            left: 3.875rem !important;
        }
    }
</style>
